<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    用户名：<input type="text" id="username"><br>
    密码：<input type="text" id="password"><br>
    <input type="checkbox" id="check"><label for="check">记住账号密码</label>
    <input type="button" value="登录" id="login">
</body>
<script>

    class remember {
        constructor(){
            // 1. 获取元素
            this.um = document.getElementById("username");
            this.pw = document.getElementById("password");
            this.check = document.getElementById("check");
            this.login = document.getElementById("login");

            // 5. 读取数据
            this.getLocal();

            // 2. 绑定事件
            this.addEvent();
        }
        getLocal(){
            // 6. 立即设置到对应输入框
            this.um.value = localStorage.getItem("username") || "";
            this.pw.value = localStorage.getItem("password") || "";
        }
        addEvent(){
            const that = this;
            this.login.onclick = function(){
                // 3. 判断是否选中
                if( that.check.checked ){
                    // 4. 存储数据
                    that.setLocal();
                }
            }
        }
        setLocal(){
            localStorage.setItem("username", this.um.value);
            localStorage.setItem("password", this.pw.value);
        }
    }

    new remember;
    
</script>
</html>